<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单词发音播放器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
    }
    .word-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .word-text {
      font-size: 18px;
      margin-right: 12px;
    }
    .play-icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: relative;
    }
    .bar {
      display: inline-block;
      width: 3px;
      height: 100%;
      margin: 0 1px;
      background: #007BFF;
      animation: bounce 1s infinite ease-in-out;
    }

    .bar:nth-child(1) { animation-delay: 0s; }
    .bar:nth-child(2) { animation-delay: 0.2s; }
    .bar:nth-child(3) { animation-delay: 0.4s; }

    .playing .bar {
      height: 20px;
    }

    .bar-container {
      display: none;
    }

    .play-icon.playing .bar-container {
      display: flex;
    }

    .play-icon:not(.playing)::before {
      content: "🔊";
      font-size: 20px;
      position: absolute;
      left: 0;
      top: 0;
    }

    @keyframes bounce {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(1.8); }
    }
  </style>
</head>
<body>

  <h2>单词列表</h2>

  <div class="word-item">
    <span class="word-text">hello</span>
    <div class="play-icon" onclick="playAudio(this, 'hello')">
      <div class="bar-container">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div class="word-item">
    <span class="word-text">world</span>
    <div class="play-icon" onclick="playAudio(this, 'world')">
      <div class="bar-container">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div class="word-item">
    <span class="word-text">python</span>
    <div class="play-icon" onclick="playAudio(this, 'python')">
      <div class="bar-container">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <audio id="audioPlayer" style="display: none;"></audio>

  <script>
    let currentPlaying = null;

    function playAudio(iconEl, word) {
      const audio = document.getElementById('audioPlayer');

      if (currentPlaying) {
        currentPlaying.classList.remove('playing');
      }

      currentPlaying = iconEl;
      iconEl.classList.add('playing');
      audio.src = `${word}.mp3`;
      audio.playbackRate = 1;
      audio.play();

      audio.onended = function () {
        iconEl.classList.remove('playing');
      };
    }
  </script>

</body>
</html>
